<template>
        <div class="dianping" style="background:#f6f6f6;">
            <header >
                <a @click="$api.goBack()" class="back"></a>
                <span >点评</span>
                <a  @click="addDianping" class="add">发送</a>
            </header>
            <div class="personal flex_wrap">
                <div class="touxiang">
                    <img :src="detail.studentPhoto" />
                </div>
                <div class="useinfo" style="width:auto;">
                    <div class="usename">{{detail.studentName}}</div>
                </div>
            </div>
            <div class="row flex" v-if="studentType.type==3">
                <div class="left" style="margin-right:0.3467rem;">试卷得分<span class="red">*</span></div>
                <div class="right">
                    <input v-model="detail.score" type="number" />
                </div>
            </div>
            <div class="row flex" v-for="(item,index) in biaoxian" v-if="studentType.type==2&&index<=1||studentType.type==3&&index>1">
                <div class="left" style="margin-right:0.3467rem;">{{item.title}}<span class="red">*</span></div>
                <div class="center start_wrap">
                    <div @click="pingfen(n,item.field)" v-for="n in detail[item.field]" class="start1"></div>
                    <div @click="pingfen(detail[item.field]+n,item.field)" v-for="n in (5-detail[item.field])" class="start2"></div>
                </div>
                <div class="right" style="flex-grow:1;text-align:right;">
                    <span :class="{red:detail[item.field]>=4,gray:detail[item.field]==1}">{{formatterPingjia(detail[item.field])}}</span>
                </div>
            </div>
            <div class="row flex" v-if="studentType.type==2" style="align-items: flex-start">
                <div class="left" style="margin-right:0.3467rem;">总体印象</div>
                <div class="right yinxiang_wrap flex">
                    <div v-for="(obj,index) in yinxiangList" :class="{active:obj.isCheck}" @click="selectYinxiang(index)" >
                        {{obj.text}}
                    </div>
                </div>
            </div>
            <div class="main row" >
                <div class="textarea_wrap" style="width:100%;padding:0;">
                    <textarea @change="changeValue" placeholder="请在此处填写你的点评内容,最多500字"
                     v-model="detail.bodyComment" rows="4"></textarea>
                </div>
            </div>
            <div class="main row flex" style="justify-content:start;flex-wrap:wrap;">
                <div class="image_wrap" v-for="img in detail.filePathList1">
                        <div @click="deleteImg(index)" class="deleteImg"></div>
                    <img :src="$api.formatterImg(img.filePath)" />
                </div>
                <div class="image_wrap" @click="AddPhoto()">
                    <img src="../../static/images/other/add-img.png"/>
                </div>
            </div>
            <getImage v-model='sheetVisible' ></getImage>
            <!-- <div class="img_wrap" >
                <img v-for='(img,index) in detail.filePathList' v-if="img.fileType==1" :src=img.filePath />
            </div> -->
            <!-- <img src="../../static/images/1.png" style="width:100%;" /> -->
        </div>
    
    </template>
<script>
    import {
        MessageBox
    } from 'mint-ui'
    import getImage from '../components/getImage.vue'
    export default {
        name: "footShow",
        data() {
            return {
                useInfo: {},
                detail: {
                    filePathList1: [],
                },
                sheetVisible: false,
                url: '', //用来存储点评的接口
                biaoxian: [{
                    title: "作业表现",
                    field: 'taskLevel'
                }, {
                    title: "行为表现",
                    field: 'behaviorLevel'
                }, {
                    title: "综合表现",
                    field: 'synthesizeLevel'
                }],
                yinxiangList: [{
                    text: "认真听讲",
                    isCheck: false,
                }, {
                    text: "团结同学",
                    isCheck: false,
                }, {
                    text: "勤劳勇敢",
                    isCheck: false,
                }, {
                    text: "服装整洁",
                    isCheck: false,
                }, {
                    text: "积极发言",
                    isCheck: false,
                }, {
                    text: "听老师话",
                    isCheck: false,
                }],
                studentType: {},
            };
        },
        methods: {
            getStudentType() { //刷新页面数据
                this.studentType = JSON.parse(sessionStorage.getItem('studentType'));
                switch (this.studentType.type) {
                    case 2:
                        this.url = "taskComment/add" //学生点评接口
                        break;
                    case 3:
                        this.url = "examComment/add" //试卷点评接口
                }
            },
            selectYinxiang(index) { //印象的点击事件,用于选中或者取消选中
                this.yinxiangList[index].isCheck = !this.yinxiangList[index].isCheck;
                this.detail.allImpression = this.yinxiangList;
                this.changeValue();
            },
            changeValue() {
                sessionStorage.setItem('dianpingDetail', JSON.stringify(this.detail));
            },
            deleteImg(index) {
                this.detail.filePathList1.splice(index, 1);
                // this.$set(this.detail.filePathList1[index], 'flagDelete', 1);
                this.changeValue();
            },
            getUseInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
            },
            getDetail() {
                let detail = JSON.parse(sessionStorage.getItem('dianpingDetail'));
                if (!detail) {
                    detail = JSON.parse(sessionStorage.getItem('studentDetail'));
                    detail.synthesizeLevel = 0;
                    detail.taskLevel = 0;
                    detail.behaviorLevel = 0;
                    detail.filePathList1 = [];
                }
                if (detail.allImpression) {
                    this.yinxiangList = detail.allImpression;
                }
                this.detail = detail;
                console.log(JSON.parse(sessionStorage.getItem('studentDetail')));
            },
            addDianping() { //发送点评
                var url = this.url;
                var params = JSON.parse(JSON.stringify(this.detail))
                params.filePathList1 = JSON.stringify(params.filePathList1);
                params.allImpression = JSON.stringify(params.allImpression);
                params.userId = this.useInfo.userId
                params.schoolId = this.useInfo.schoolId
                switch (this.studentType.type) {
                    case 2: //学生点评单独处理
                        if (params.taskLevel == 0) { //如果没选作业表现
                            MessageBox('提示', '请选择作业表现!');
                            return;
                        }
                        if (params.behaviorLevel == 0) { //如果没选行为表现
                            MessageBox('提示', '请选择行为表现!');
                            return;
                        }
                        break;
                    case 3: //试卷点评单独处理
                        if (!params.score || params.score.trim().length == 0) { //如果没输分数
                            MessageBox('提示', '请输入试卷分数!');
                            return;
                        }
                        if (params.synthesizeLevel == 0) { //如果没选综合表现
                            MessageBox('提示', '请选择综合表现!');
                            return;
                        }
                        break;
                }
                this.$api.post(url, params, (data) => {
                    this.$api.clearItem('studentType', 'classId'); //清除 除了userInfo和studentType外所有缓存数据
                    MessageBox('提示', '提交成功');
                    this.$api.goBack();
                })
            },
            AddPhoto() { //打开照片选择器
                this.sheetVisible = true;
            },
            getImageBack() { //
                var filepath = JSON.parse(sessionStorage.getItem('imgOption'));
                if (filepath) {
                    console.log(JSON.parse(JSON.stringify(this.detail.filePathList1)));
                    this.detail.filePathList1.push(filepath);
                }
                sessionStorage.removeItem('imgOption');
                this.changeValue();
            },
            pingfen(index, field) { //type1作业,2行为,3综合
                console.log(index, field);
                this.detail[field] = index;
            },
            formatterPingjia(pingfen) {
                switch (pingfen) {
                    case 5:
                        return "非常好";
                        break;
                    case 4:
                        return "好";
                        break;
                    case 3:
                        return "一般";
                        break;
                    case 2:
                        return "差";
                        break;
                    case 1:
                        return "非常差";
                        break;
                }
            }
        },
        components: {
            getImage
        },
        created() {
            this.getUseInfo();
            this.getStudentType();
            this.getDetail();
            this.getImageBack();
        }
    }
</script>
<style scoped>
    .wrap {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: auto;
        text-align: left;
        padding: 0.2rem;
        padding-left: 0.4rem;
        font-size: 0.3rem;
        background: white;
        margin-bottom: 0.2rem;
    }
    
    .useinfo {
        display: flex;
        align-items: center;
    }
    
    .useinfo .usename {
        padding-top: 0;
    }
    
    .text {
        font-size: 0.4rem;
        width: 100%;
        color: #161616;
        margin-bottom: 0.18rem;
    }
    
    .time {
        width: auto;
        height: 0.55rem;
        font-size: 0.3rem;
        color: #a6a6a6;
    }
    
    .delete {
        color: #0489ff;
        margin-left: 0.25rem;
    }
    
    .audio_wrap {
        width: 100%;
        height: auto;
    }
    
    .audio_wrap audio {
        width: 7rem;
    }
    
    .dongtai_action {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 0.9rem;
        line-height: 0.9rem;
        font-size: 0.4rem;
        color: #5e5e5e;
        border-top: 1px solid #ebebeb;
    }
    
    .dongtai_action i {
        margin-top: 0.14rem;
        margin-right: 0.2rem;
    }
    
    .zan {
        display: flex;
        width: 2.2rem;
        height: 100%;
        justify-content: center;
    }
    
    .zan.active div {
        color: #0489ff;
    }
    
    .zan.active i {
        background-image: url('../../static/images/dongtai/3@2x.png');
    }
    
    .zan i {
        display: block;
        width: 0.6rem;
        height: 0.6rem;
        background-image: url('../../static/images/dongtai/5@2x.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    
    .pinglun {
        width: 4rem;
        display: flex;
        height: 100%;
        justify-content: center;
    }
    
    .pinglun i {
        display: block;
        width: 0.6rem;
        height: 0.6rem;
        background-image: url('../../static/images/dongtai/4@2x.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    
    .share {
        width: 3rem;
        display: flex;
        height: 100%;
        justify-content: center;
    }
    
    .share i {
        display: block;
        width: 0.6rem;
        height: 0.6rem;
        background-image: url('../../static/images/dongtai/1@2x.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    
    .dongtai_zan {
        display: none;
        border-top: 1px solid #ebebeb;
        width: 100%;
        height: 0.9rem;
        line-height: 0.9rem;
    }
    
    .dongtai_zan.active {
        display: flex;
    }
    
    .dongtai_zan i {
        display: block;
        width: 0.45rem;
        height: 0.45rem;
        margin-top: 0.18rem;
        margin-right: 0.2rem;
        background-image: url('../../static/images/dongtai/7@2x.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    
    .dongtai_zan .name {
        margin-left: 0.1rem;
    }
    
    .pinglun_list_wrap {
        border-top: 1px solid #ebebeb;
        width: 100%;
    }
    
    .huifu_wrap {
        padding-left: 0.6rem;
    }
    
    .pinglun_list li>div {
        color: #808080;
        display: flex;
        height: 0.7rem;
        line-height: 0.7rem;
        padding-right: 0.2rem;
        justify-content: space-between;
    }
    
    .pinglun_list .delete {
        color: #9f9f9f;
    }
</style>